[#ftl]
[@define "agile.WidgetIconPane" "ContentPane"]
[#assign iconTemplate][#compress]		
<div style="position:relative" data-dojo-id="{sourceId}" data-dojo-type="dojo/dnd/Source" data-dojo-props="copyOnly:true,selfCopy:false,selfAccept:false">{innerWidgets}</div>
[/#compress][/#assign]
store:"",name:"Common_Widgets"	
,constructor:function(){

	aspect.after(this,"startup",lang.hitch(this,"init"));
	
	this.sourceId = dojo.dnd.getUniqueId();
	
	aspect.after(this,"postCreate",lang.hitch(this,function(){		
		var innerHTML = "";
		if(this.store && agile[this.store]){    		
	    	var definedWigdets = agile[this.store].split(";");  	    	
	    	for(var i = 0; i < definedWigdets.length; i++){
	    		if(definedWigdets[i]){
	    			innerHTML += "<div  data-dojo-type='" +definedWigdets[i] +"'></div>";
	    		}
	    	}
		}

		var dndSourceNode = construct.create("div",{innerHTML:lang.replace("${iconTemplate?js_string}",{innerWidgets:innerHTML,sourceId:this.sourceId})});
		construct.place(dndSourceNode.firstChild,this.domNode,"last");
		parser.parse(this.domNode);
		
	}));  
}
,getTitleNode:function(){
	return this._buttonWidget.domNode;
}
,init:function(){  
	this.getTitleNode().title = agile.i18n("widget_help",null,"Drag and drop the icons to the page to add new widgets");
	
	//console.log("size:",agile.calcSize(this.domNode));
	
	this.repositionIcons({w:400});
	var avatorNodes = {};
	var source = kernel.global[this.sourceId];
	source.creator=function(item,hint){
		var node = avatorNodes[item];
		if(!node){
			node = construct.create("div",{innerHTML:item});
    		query(".widgetIcon",node).style({position:"absolute",left:"-10px",top:"-10px",border:"0px solid"});	
		}
		
		return {node:node,data:item};
	};  	
//	style.set(this.domNode,{position:"absolute"});
}
//,repositionIcons:function(){
//	var icons = query(".widgetIcon",this.domNode);
//	console.log(this.declaredClass,"icons.length=",icons.length);
//	if(icons.length == 0){
//		return;
//	}
//	var width = 200;//agile.calcSize(this.domNode).w; 
//	var iconSize = {w:40,h:40};//agile.calcSize(icons[0]);
//	var itemCountPerRow = Math.floor((width - 10) / (iconSize.w + 2));
////	console.log(this.declaredClass,width,iconSize.w,iconSize.h,itemCountPerRow,this._currentItemCountPerRow);
//	if(itemCountPerRow != this._currentItemCountPerRow){    		
//		this._currentItemCountPerRow = itemCountPerRow;    		
//    	array.forEach(icons,function(icon,index){        		
//    		var left = (index % itemCountPerRow) * (iconSize.w);
//    		var top = Math.floor(index /itemCountPerRow) * (iconSize.h);
//    		style.set(icon,{position:"absolute",left:left+"px",top:top+"px"}); 
//    	});	
//	}
//}
//,getResizableSize:function(){
//	return {height:"250px",width:"300px"};		 
//}
//,getDefaultLocation:function(){
//	return {left:"350px",top:"100px"};		 
//}
//,onResizeStop:function(size){
//	this.repositionIcons(size);
//}
,repositionIcons:function(size){
	//{l: 10, t: 150, w: 320, h: 439}		
	var width = size.w;
	var iconSize = {w:40,h:40};
	var itemCountPerRow = Math.floor((width - 10) / (iconSize.w + 2));
	if(itemCountPerRow != this._currentItemCountPerRow){    		
		this._currentItemCountPerRow = itemCountPerRow; 
		var icons = query(".widgetIcon",this.domNode);
    	array.forEach(icons,function(icon,index){        		
    		var left = (index % itemCountPerRow) * (iconSize.w);
    		var top = Math.floor(index /itemCountPerRow) * (iconSize.h);
    		style.set(icon,{position:"absolute",left:left+"px",top:top+"px"}); 
    	});	
	}
}
[/@]